<style scoped>

    @import '../styles/detail.css';
</style>
<template>
    <header-component :page-name="pageName">
        <a href="javascript:;" class="m-simpleHeader-ok" data-href="./" v-link="{path:'/home'}"><i class="ico ico-home"></i></a>
    </header-component>
    <div id="page-detail" class="page-wrap page-detail">
        <div class="g-body">
            <div class="m-detail"  :data-gi="data.shopid" :data-ten="data.isTen" :data-title="data.shopTitle">
                <div class="m-detail-menu">
                    <div class="m-detail-menu-wrap" style="display:none">
                        <i class="ico ico-arrow ico-arrow-transGray"></i>
                        <ul class="m-detail-menu-list">
                            <li><a class="item" href="javascript:;" data-href="?c=cart"><span class="miniCart"><span class="w-miniCart w-miniCart-gray"><i class="ico ico-miniCart ico-miniCart-gray"></i><b class="w-miniCart-count" data-fn="cartnum"{{^if cartNum}} style="display:none"{{/if}}>{{cartNum}}</b></span></span>清单</a></li>
                            <li class="last"><a class="item" href="javascript:;" data-href="./"><i class="ico ico-home ico-home-light"></i>首页</a></li>
                        </ul>
                    </div>
                </div>
                <div class="g-wrap">
                    <div class="g-wrap-hd">
                        <div class="w-slide m-detail-show">
                            <div class="w-slide-wrap">
                                <ul class="w-slide-wrap-list">
                                    <li class="w-slide-wrap-list-item selected" :data-img="data.shopid">
                                        <img :src="data.thumb" />
                                    </li>
                                </ul>
                            </div>
                            <div class="w-slide-controller">
                            <div class="w-slide-controller-nav"></div>
                        </div>
                    </div>

                        <!--  如果有中奖者  -->
                        <!--  #if data.winUserId  -->
                        <div class="m-detail-goods-result" v-if="!!data.winUserId">
                            <div class="w-record">
                                <i class="ico ico-label ico-label-winner"></i>
                                <div class="w-record-avatar">
                                    <a href="javascript:;" data-href="?c=profile&amp;id={{data.winUserIdBak}}" v-link="{name:'profile',query:{id:data.winUserIdBak}}"><img width="90" height="90" :src="data.winUserImg"></a>
                                </div>
                                <div class="w-record-detail">
                                    <p>期号：{{data.periods}}</p>
                                    <p class="f-breakword">获奖者：<a href="javascript:;" data-href="?c=profile&amp;id={{data.winUserIdBak}}" v-link="{name:'profile',query:{id:data.winUserIdBak}}">{{data.winName}}</a></p>
                                    <p>用户IP：<span class="txt-green">{{data.winIp}} {{data.winCity}}</span></p>
                                    <!--<p>用户ID：{{data.winUserId}} (唯一不变标识)</p>-->
                                    <p>本期参与：{{data.winBuyNum}}人次　<a class="m-detail-userCodes-viewWinnerCodesBtn" href="javascript:;" :data-codeViewTitle="data.shopTitle" :data-codeViewTimes="data.winBuyNum" :data-codeViewPeriods="data.periods" :data-codeView="data.winBuyCode" @click="showCode(data)">查看Ta的号码</a></p>

                                    <p>揭晓时间：{{data.endTime}}</p>
                                </div>
                            </div>
                            <p class="m-detail-goods-result-luckyCode">幸运号码：<b>{{data.winLucklyCode}}</b> <a class="resultBtn w-button w-button-simple w-button-simple-white" href="javascript:;" data-href="?c=calculation&amp;id={{data.shopid}}" v-link="{path:'/calculation',query:{id:data.shopid}}">查看计算详情</a></p>
                        </div>

                        <!--  如果有中奖者  -->
                        <!--  {{else}}  -->
                        <div class="w-goods w-goods-xxl m-detail-goods" v-else>
                            <div class="w-goods-info">
                                <p class="w-goods-title" :data-shoptitle="data.shopTitle">{{data.shopTitle}}<span style="color: #dd445e" v-if="data.title2">[{{data.title2}}]</span></p>
                                <p class="w-goods-period" :data-period="data.periods">期号：{{data.periods}}</p>
                                <div class="w-progressBar">

                                    <p class="wrap">
                                        <span class="bar" :style="{width:100-(data.remainderNum/data.totalNum)*100+'%'};"><i class="color"></i></span>
                                    </p>
                                    <ul class="txt">

                                        <li class="txt-l">
                                            <p>总需{{data.totalNum}} 人次</p>
                                        </li>
                                        <li class="txt-r">
                                            <p>剩余<b class="txt-blue">{{data.remainderNum}}</b></p>
                                        </li>
                                    </ul>
                                </div>

                                <!--  上一期有数据  -->

                                <div class="m-detail-goods-result" v-if="!!before">

                                    <div class="w-record">
                                        <i class="ico ico-label ico-label-winner"></i>
                                        <div class="ico-label-last" style="">上期揭晓</div>
                                        <div class="w-record-avatar">
                                            <a href="javascript:;" data-href="?c=profile&amp;id={{before.winUserIdBak}}" v-link="{name:'profile',query:{id:before.winUserIdBak}}"><img width="90" height="90" :src="before.winUserImg"></a>
                                        </div>
                                        <div class="w-record-detail">
                                            <p>期号：{{before.periods}}</p>
                                            <p class="f-breakword">获奖者：<a href="javascript:;" data-href="?c=profile&amp;id={{before.winUserIdBak}}" v-link="{name:'profile',query:{id:before.winUserIdBak}}">{{before.winName}}</a></p>
                                            <p>用户IP：<span class="txt-green">{{before.winIp}} {{before.winCity}}</span></p>
                                            <p>揭晓时间：{{before.endTime}}</p>
                                            <p>购买次数：<span class='txt-red'>{{before.winBuyNum}}</span>人次</p>
                                        </div>
                                    </div>
                                    <p class="m-detail-goods-result-luckyCode">幸运号码：<b>{{before.winLucklyCode}}</b> <a class="resultBtn w-button w-button-simple w-button-simple-white" href="javascript:;" data-href="?c=calculation&amp;id={{before.shopid}}" v-link="{path:'/calculation',query:{id:before.shopid}}">查看计算详情</a></p>
                                </div>


                                <!--  参与了  -->

                                <template v-if="data.winBuyNum!=0">
                                    <div class="w-progressBar-info">
                                        <p style="padding: 10px 0;text-align: center">您参与了：<span>{{data.winBuyNum}}</span>人次    <span id="detail_showCode" @click="showMyCode(data)">查看号码 >></span></p>
                                    </div>
                                </template>
                                <template v-else>
                                    <div class="w-progressBar-info">
                                        <p style="padding: 10px 0;text-align: center">您还没有参与本期拼宝！</p>
                                    </div>
                                </template>


                                <div class="w-goods-tip">
                                    <p class="w-goods-tip-state">声明：所有抽奖活动与苹果公司(Apple.lnc)无关</p>
                                    <p class="w-goods-tip-guide"><span class="checkGuide">☑</span> 我已阅读并同意<a class="toGuide" href="?c=guide" v-link="{path:'/serveRule'}">服务协议</a></p>
                                </div>
                            </div>
                        </div>
                        <!--{{/if}}-->
                    </div>

                    <div class="g-wrap-bd">

                        <div class="m-detail-more">
                            <a href="javascript:;" class="w-bar" data-href="?c=intro&amp;id={{data.shopid}}" v-link="{path:'/intro',query:{id:data.shopid}}">图文详情 <span class="w-bar-hint">( 建议在wifi下查看 )</span><span class="w-bar-ext"><b class="ico-next"></b></span></a>
                            <a href="javascript:;" class="w-bar" data-href="?c=previousRecord&amp;id={{data.shopid}}" v-link="{path:'/previousRecord',query:{id:data.shopid}}">往期揭晓<span class="w-bar-ext"><b class="ico-next"></b></span></a>
                            <a href="javascript:;" class="w-bar" data-href="?c=share&amp;id={{data.shopid}}" v-link="{path:'/shareOrder',query:{id:data.shopid}}">晒单分享<span class="w-bar-ext"><b class="ico-next"></b></span></a>
                        </div>
                        <div class="m-detail-record">
                            <div class="w-bar">所有参与记录 <span class="w-bar-hint">( 自{{data.recordStartTime}}开始 )</span></div>
                            <div class="m-detail-record-wrap">
                                <ul class="m-detail-record-list" id="detailRecordList">
                                    <li v-for="item in goodsRecord">
                                        <div class="m-detail-record-time">{{item.time}}</div>
                                        <div class="f-clear">
                                            <div class="avatar">
                                                <a href="javascript:;" data-href="?c=profile&amp;id={{userid}}" v-link="{name:'profile',query:{id:item.userid}}"><img width="35" height="35" :src="item.userimg"></a>
                                            </div>
                                            <div class="text">
                                                <p class="f-breakword"><a href="javascript:;" data-href="?c=profile&amp;id={{userid}}" v-link="{name:'profile',query:{id:item.userid}}">{{item.username}}</a> <span class="address">({{item.city}} IP：{{item.userip}})</span></p>
                                                <p><span class="num">参与了<span class="txt-red">{{item.personNo}}</span>人次</span> {{item.time}}</p>
                                            </div>
                                        </div>
                                    </li>
                                </ul>
                                <div class="m-detail-record-more">

                                    <div class="w-more" id="detailRecordMore" v-el:detail-record-more v-if="hasMore"><b class="ico ico-loading"></b> 努力加载中</div>
                                    <div class="w-more" v-else> 没有更多了</div>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="m-simpleFooter m-detail-buy">
                    <div class="m-simpleFooter-text" style="text-align:center">
                        <a v-if="data.belongs_to==1" class="w-button w-button-main" :data-ten="data.isTen" :data-title="data.shopTitle" :data-total="data.totalNum" :data-buy="data.shopid"  @click="freeBuy">立即参与</a>
                        <a v-else class="w-button w-button-main"  :data-ten="data.isTen" :data-title="data.shopTitle" :data-total="data.totalNum" :data-buy="data.shopid"  @click="join">立即参与</a>
                        <a class="w-button" href="javascript:;" :data-ten="data.isTen" :data-addcart="data.shopid" id="detailShowLog"  @click="addCart">加入清单</a>
                    </div>
                </div>
            </div>
        </div>
    </div>

<pop :status-pop="statusPop" :status-toast='statusToast' :msg="msg" :delay="delay">
    <template v-if="isDouble">
        <a href="javascript:;" v-if="popType==505" v-link="{path:'/redpack'}">{{sureTxt}}</a>
        <a href="javascript:;" v-else v-link="{path:'/'}">{{sureTxt}}</a>
        <a href="javascript:;">{{cancleTxt}}</a>
    </template>
    <template v-else>
        <a href="javascript:;" @click="statusPop=false">确定</a>
    </template>
</pop>


<code-pop :code-list="codeData.winBuyCode" :status-code="statusCode" :periods="codeData.periods" :goodsname="codeData.shopTitle" :count="codeData.winBuyNum"></code-pop>

</template>
<script>
    import headerComponent from '../components/header'
    import pop from '../components/pop'
    import Cart from '../module/cart'
    import User from '../module/user'
    import Goods from '../module/goods'
    import Weixin from '../libs/wxShare'
    import codePop from '../components/codePop'

    export default {
        filters: {

        },
        directives: {

        },
        data () {
            return {
                pageName:'商品详情',
                data: {},
                before: {},
                goodsRecord:[],
                sureTxt:'',
                cancleTxt:'',
                statusPop:false,
                statusToast:false,
                statusCode:false,
                msg:'',
                delay:2000,
                isDouble:false,
                popType:0,
                id: '',
                page: 0,
                limit: 10,
                hasMore: true,
                loading: false,
                codeData:{},

            }
        },
        created(){
            this.$dispatch('isLoading',true)
        },
        async ready () {


            console.log(User);

            this.id=this.$route.query.id;

            if (!this.id) {
                history.go(-1);
                return;
            }


            localStorage.setItem('payback_id',this.id);

            let goodsDetail= await Goods.getDetail(this.id,User.token);


            this.data=Object.assign({},this.data,goodsDetail.data);

            if(!!goodsDetail.before) this.before=Object.assign({},this.before,goodsDetail.before);

            this.$nextTick(()=>{
                Weixin.init(()=> {
                    Weixin.updateShare({
                        title:this.data.shopTitle,
                        link:window.href,
                        imgUrl:this.data.thumb,
                        success: function() {

                        }

                    })
                });



            document.addEventListener('scroll',this.getmore,false)

             this.$dispatch('isLoading',false)

            })

        },

        components:{

            headerComponent,
            pop,
            codePop

        },
        beforeDestroy () {

            document.removeEventListener('scroll',this.getmore,false)
        },
        methods: {
            showCode(data){
                this.codeData = Object.assign({},this.data.winLucklyCode,data)

                this.statusCode = true
            },
            showMyCode(data){

                this.codeData = Object.assign({},this.codeData,data)

                this.statusCode = true

            },
            addCart(e){

                Cart.addCart($(e.target));


            },
            join(e){
                let {id,total,title,isTen}={id:e.target.dataset.buy,total:e.target.dataset.total,title:e.target.dataset.title,isTen:e.target.dataset.ten};
                if(isTen=='1')  Cart.add(id, 10,title,total);
                else Cart.add(id, 1,title,total);
                this.$router.go({path:'/cart'})

            },
            async getmore(){
                let pos = this.$els.detailRecordMore.getBoundingClientRect();
                if ( this.hasMore &&
                        ((pos.top > 0 && window.innerHeight - pos.top > 0) ||
                        (pos.top <= 0 && pos.bottom >= 0))) {
                    await this.loadMore();
                }
            },

            async freeBuy(){

                if(!User.isLogin){

                    this.$router.go({path:'/login'})
                }
                let res=await Cart.freeBuy(this.id)

                this.popType=res.status;

                this.msg=res.msg;

                this.statusPop=true;

                switch (res.status){
                    case 201:
                        this.sureTxt='继续逛逛';
                        this.cancleTxt='关闭';
                        this.isDouble=true;
                        break;
                    case 202:
                        this.sureTxt='去消费';
                        this.cancleTxt='关闭';
                        this.isDouble=true;
                        break;
                    case 505:
                        this.sureTxt='看看别的';
                        this.cancleTxt='关闭';
                        this.isDouble=true;

                        break;
                    case 200:
                    case 501:
                    case 509:
                        this.isDouble=false;
                        break;
                }
            },
            async loadMore(){
                if (this.loading||!this.hasMore) {
                    return;
                }

                let formData = {
                    limit: this.limit,
                    offset: this.limit * this.page,
                    id: this.id
                };

                this.loading = true;

                let goodsRecord=await Goods.getRecord(formData);
                if (goodsRecord && goodsRecord.item && goodsRecord.item.length > 0) {
                    this.page++;

                    this.goodsRecord.push(...goodsRecord.item);
                } else {
                    this.hasMore = false;
                    document.removeEventListener('scroll',this.getmore,false)
                }
                    this.loading = false;
            },

        },
        events:{

            closeCodePop(val){

                console.log('asdad')

                this.statusCode = val;

            }

        }
    }
</script>
